<template>
  <div>
    <!-- 内容 -->
    <el-row>
      <el-col :span="12">
        <mavon-editor ref="mavonRef" v-model="article.contentMd" :subfield="false" :defaultOpen="'preview'" :editable="false" :toolbarsFlag="false"> </mavon-editor>
      </el-col>
      <el-col :span="5">
        <el-card shadow="always" style="width: 100%; margin-left: 30px">
          <template #header>
            <div class="card-header">
              <span>{{ article.title }}</span>
              <el-tag class="ml-2" style="margin-left: 10px" type="success">阅读数:{{ article.readNum || 0 }}</el-tag>
              <el-tag class="ml-2" style="margin-left: 10px" type="danger">下载数:{{ article.downloadNum || 0 }}</el-tag>
            </div>
          </template>

          <div style="margin-top: 10px" v-for="item in menus" :key="o" class="text item">
            <a @click="scrollToPosition(item.href)" v-html="item.name"></a>
          </div>
        </el-card>
      </el-col>
      <el-col :span="5" v-if="article.lockStatus == 0 || grantStatus == 1">
        <el-card shadow="always" style="width: 300px; margin-left: 60px">
          <template #header>
            <div class="card-header">
                <el-icon color="green" :size="18"><Unlock /></el-icon>
              <span> 附件</span>  
            </div>
            <file-cell v-for="(item,index) in article.files" :file="item" @confirm="downloadFile"></file-cell>
          </template>
          
        </el-card>
      </el-col>
      <el-col :span="5" v-else>
        <el-card shadow="always" style="width: 300px; margin-left: 60px">
          <template #header>
            <div class="card-header">
              <span> 附件</span>
            </div>
          </template>
          <el-result title="禁止访问" sub-title="点击联系获得授权">
            <template #icon>
              <el-icon color="red" :size="50"><Lock /></el-icon>
            </template>
            <template #extra>
              <el-button type="primary">查看联系方式</el-button>
            </template>
          </el-result>
        </el-card>
      </el-col>

    </el-row>
  </div>
</template>

<script setup name="ArticleDetail">
import FileCell from "@/module/disk/components/FileCell/index";
import { queryList, createOne, deleteOne, queryOne, updateOne } from "@/api/cms/article";
import { offsetDomTop, scrolltoToc } from "@/utils/mavon.js";
// 额外附件内容
import {queryGrant} from "@/api/grant";
const { proxy } = getCurrentInstance();
const route = useRoute();
const article = ref({});
const grantStatus = ref(0);
// 目录挂载
const menus = ref([]);
defineExpose({
  article,
});

// 文件下载
function downloadFile(fileId){
  window.location.href = host + '/cms/download?fileId='+fileId+'&articleId='+article.value.id
}
// 跳转
function scrollToPosition(id) {
  var position = offsetDomTop(document.getElementById(id));
  //80是因为有着导航条的高度
  position.top = position.top - 80;
  scrolltoToc(position.top);
}

// 构建目录
function buildTocs() {
  proxy.$nextTick(() => {
    console.log("页面渲染完成");
    const aArr = proxy.$refs["mavonRef"].$refs["vShowContent"].querySelectorAll("a");
    let tocs = [];
    for (var i = 0; i < aArr.length; i++) {
      if (aArr[i].id) {
        let href = aArr[i].id;
        let name = aArr[i].parentNode.innerText;
        tocs.push({
          // href: "#" + href, jqurey id选择器需要#
          href: href,
          name,
        });
      }
    }
    console.log(tocs);
    menus.value = tocs;
  });
}
// 授权查询
// 文章查询
function getArticle() {
  queryOne(route.params.id).then((response) => {
    document.title = response.title;
    console.log(response);
    article.value = response;
    buildTocs();
    grantStatus.value = true;
    // 查询授权
    // queryGrant(response.id).then(ans=>{
    //   console.log(ans)
    //   grantStatus.value = ans
    // })
  });
  //   .$img2Url(pos, imgUrl);
}
getArticle();
</script>
<style></style>
